<!-- 商品管理 -->
<template>
  <div class="outer">
    <h5>商品管理</h5>
    <div class="main">
      <div class="left">
        <div class="active-coffee">
          <h6>活动咖啡展示</h6>
          <avue-crud
            :data="countCoffeeData"
            :option="countCoffeeOption"
          ></avue-crud>
        </div>
      </div>
      <div class="right">
        <h6>咖啡列表展示</h6>
        <avue-crud
          :data="coffeeData"
          :option="coffeeOption"
          @row-update="coffeeUpdate"
          @row-del="coffeeDel"
          @row-save="addCoffee"
          @on-load="getCoffe"
          :page.sync="coffeePage"
        ></avue-crud>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCountCoffee,
  getOrderStatistics,
  getCoffeePage,
  postCofeeData,
  delCoffeeData,
  addCoffee,
  getListData,
} from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      countCoffeeData: [],
      countCoffeeOption: {
        addBtn: false,
        menu: false,
        column: [
          {
            label: "id",
            prop: "id",
            hide: true,
            display: false,
          },
          {
            label: "名称",
            prop: "name",
            display: false,
          },
          {
            label: "描述",
            prop: "description",
            display: false,
          },
          {
            label: "分类",
            prop: "categoryId",
            hide: true,
            display: false,
          },
          {
            label: "价格",
            prop: "price",
            display: false,
          },
          {
            label: "销售状态",
            prop: "status",
            type: "select",
            dicData: [
              {
                label: "停售",
                value: 0,
              },
              {
                label: "起售",
                value: 1,
              },
              {
                label: "活动",
                value: 2,
              },
            ],
          },
        ],
      },
      coffeePage: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      query: "",
      coffeeData: [],
      coffeeOption: {
        column: [
          {
            label: "id",
            prop: "id",
            hide: true,
            display: false,
          },
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "描述",
            prop: "description",
          },
          {
            label: "分类id",
            prop: "categoryId",
            type: "select",
            dicData: [],
            hide: true,
          },
          {
            label: "分类",
            prop: "categoryName",
            display: false,
          },
          {
            label: "价格",
            prop: "price",
          },
          {
            label: "销售状态",
            prop: "status",
            type: "select",
            dicData: [
              {
                label: "停售",
                value: 0,
              },
              {
                label: "起售",
                value: 1,
              },
              {
                label: "活动",
                value: 2,
              },
            ],
          },
          {
            label: "顺序",
            prop: "sort",
            hide: true,
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 获取咖啡状态
    getCoffe() {
      getCountCoffee()
        .then((result) => {
          if (result.data.code == 1 && result.data.data.length != 0) {
            this.countCoffeeData = result.data.data;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取咖啡状态失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });

      getCoffeePage({
        pageSize: this.coffeePage.pageSize,
        currentPage: this.coffeePage.currentPage,
        queryString: this.query,
      })
        .then((result) => {
          if (result.data.code == 1 && result.data.data.length != 0) {
            this.coffeeData = result.data.data.rows;
            this.coffeePage.total = result.data.data.total;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取咖啡列表失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    getCoffeCategory() {
      getListData()
        .then((result) => {
          if (result.data.code == 1 && result.data.data.length != 0) {
            result.data.data.map((item) => {
              this.coffeeOption.column[3].dicData.push({
                label: item.name,
                value: item.id,
              });
            });
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取分类列表失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 更新编辑数据
     * @param {Object} form 表单内容
     * @param {Number} index 表单数据
     * @param {Function} done 执行方法
     * @param {*} loading
     */
    coffeeUpdate(form, index, done, loading) {
      postCofeeData({
        // flavors: form.flavors,
        id: form.id,
        name: form.name,
        description: form.description,
        categoryId: form.categoryId,
        price: Number(form.price),
        status: Number(form.status),
        sort: Number(form.sort),
        image: form.image,
      })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "编辑成功！",
              type: "success",
            });
            this.getCoffe();
          }
        })
        .catch((err) => {
          this.$message({
            message: "编辑失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },

    /**
     * 删除数据
     * @param {Object} form 表单内容
     * @param {Number} index 表单顺序
     */
    coffeeDel(form, index) {
      delCoffeeData({ id: form.id })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getCoffe();
          }
        })
        .catch((err) => {
          this.$message({
            message: "编辑失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 新增咖啡数据
     * @param {Object} form 新增的数据
     * @param {Function} done 完成方法
     * @param {*} loading
     */
    addCoffee(form, done, loading) {
      addCoffee(form)
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "新增成功！",
              type: "success",
            });
            this.getCoffe();
          }
        })
        .catch((err) => {
          this.$message({
            message: "新增失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },
  },
  created() {},
  mounted() {
    this.getCoffe();
    this.getCoffeCategory();
  },
};
</script>
<style lang="scss" scoped>
.outer {
  padding: 20px;

  h5 {
    margin: 20px;
  }

  .main {
    display: flex;

    .left {
      flex: 1;
      text-align: center;

      .coffee-echarts {
        width: 40%;
        padding: 20px 0 0 0;

        #echart {
          width: 100%;
          height: 400px;
        }
      }
    }

    .right {
      flex: 1;
      padding: 0 0 0 20px;
      text-align: center;
    }
  }
}
</style>